<template>
  <div>
    <div class="part3">
      <span class="s11">我们的团队</span>
      <p class="s12">示功图故障诊断团队是一群技术爱好者，他们热衷于开发一个用户友好的网络平台，用于诊断测功机图形和数据中的故障，提供机器管理、实时监控和统计分析功能.</p>
    </div>

    <div class="part4">
      <span style="font-size:45px">满足的客户</span>
      <p class="s14">我们提供了一个易于使用的网络平台，用于诊断和分析功率图图像和数据，提供故障结果和实时监控，所有这些都以用户友好的界面呈现，并采用凉爽的蓝色配色方案。</p>
      <el-button type="primary" @click="service" style="background-color: #0062cc;width: 200px;height: 60px;margin-top: 30px">查看所有服务</el-button>
      <img src="../assets/img/part403.png" alt="" class="part403">
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const service = () => {
  router.push('/home/service');
};
</script>

<style scoped>
.part3{
  height: 150px;
  padding-left: 150px;
  padding-right: 150px;
  padding-top: 20px;
  background-color:rgba(151, 171, 215, 0.12)  ;
}
.s11{
  font-size:45px;
}
.s12{
  font-size: 15px;
  line-height: 20px;
  color: #515a6e;
}
.people  {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  margin-top: 20px;
}

.people1{
  width: 600px;
  height: 400px;
  margin:60px;
}
.part401{
  width: 230px;
  height: 330px;
  border-radius: 10px;
}
.box02{
  width: 200px;
  margin-left: 280px;
  margin-top: -230px;
}
.s13{
  font-size: 15px;
  line-height: 25px;
  font-weight: lighter;
  color: #515a6e;
}
.box03{
  width: 200px;
  margin-left: 280px;
  margin-top: -300px;
}
.s14{
  width: 500px;
  font-size: 15px;
  color:#515a6e;
  margin-top: 20px;
  line-height: 25px;
}
.part403{
  width: 650px;
  height: 450px;
  margin-left: 550px;
  margin-top: -300px;
  border-radius: 5px;
}
.s14{
  width: 500px;
  font-size: 15px;
  color:#515a6e;
  margin-top: 20px;
  line-height: 25px;
}
.part403{
  width: 650px;
  height: 450px;
  margin-left: 550px;
  margin-top: -300px;
  border-radius: 5px;
}
.part4{
  height: 500px;
  margin-left: 160px;
  margin-right: 160px;
  margin-top: 10px;
  position: relative;
  top:80px;
}

</style>
